<template>
	<view>
		<!-- 请选择报修类型 s -->
		<view class="bs-choose xb-card">
			<view class="bs-choose-t">
				请选择报修类型
			</view>
			<view class="bs-choose-b">
				<view v-for="(item,index) in chooseList.slice(0,3)" :key="index"
					:class="typeChooseIndex==index?'choose':''" @click="chooseFn(index)">
					{{item.name}}
				</view>
				<view :class="typeChooseIndex>2?'choose':''" @click="selectShow=true">
					{{typeChooseIndex>2?chooseList[typeChooseIndex].name:'其他'}}
				</view>
			</view>
		</view>
		<!-- 请选择报修类型 e -->

		<!-- 报修信息 s -->
		<view class="bxxx xb-card">
			<view class="bxxx-t">
				请输入报修信息
			</view>
			<view class="bxxx-c">
				<view class="bxxx-col">
					<text>报修地点</text>
					<input type="text"  v-model="form.repairAddress" placeholder="请输入地点" />
				</view>
				<view class="bxxx-col">
					<text>联系电话</text>
					<input type="text"  v-model="form.phone" placeholder="请输入联系电话" />
				</view>
				<view class="bxxx-col">
					<text>报事人</text>
					<input type="text" v-model="form.reporter" placeholder="请输入报事人" />
				</view>
				<view class="bxxx-col">
					<text>备注</text>
					<textarea auto-height maxlength="100"  v-model="form.remark" placeholder="请输入最多100个字符…"></textarea>
				</view>
			</view>
		</view>
		<!-- 报修信息 e -->


		<!-- 提交按钮 s -->
		<view class="bx-submit" @click="addRepair()">
			提交报修
		</view>
		<!-- 提交按钮 e -->
		<!-- 报修信息 e -->
		<u-select v-model="selectShow" mode="mutil-column-auto" :list="chooseList.slice(3,chooseList.length)"
			@confirm="selectConfirm" label-name="name"></u-select>

		<!--    提交成功s-->
		<view class="tjcg" v-if="showSuccess">
			<div class="tjcg-c">
				<view class="suc" style="">
					<u-icon name="checkbox-mark" color="#fff" size="50"></u-icon>
				</view>
				<view>提交成功</view>
				<view>请耐心等待工作人员联系您</view>
			</div>
		</view>
		<!--    提交成功e-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseList: [{
					name: "水"
				}, {
					name: "电"
				}, {
					name: "气"
				}, {
					name: "燃气"
				}, {
					name: "水管"
				}, {
					name: "考核表"
				}, {
					name: "企业私表"
				}],
				typeChooseIndex: 2,
				showSuccess:false,
				selectShow: false,
				form: {
					"createBy": "",
					"duration": '', //处理耗时
					"dutySharing": '', //责任
					"endReason": "", //结束原因
					"handler": '', //处理人,维修人
					"handlerId": '', //处理人,维修人id
					"handlerPhone": '', //处理人,维修人
					"orderSource": "", //工单来源
					"params": {},
					"paymentState": '',
					"phone": '', //电话
					"problem": "",
					"remark": "",
					"repairAddress": "", //报修地点
					"repairFee": '', //维修费用
					"reportTime": "",
					"reporter": '', //报事人
					"result": "", //处理结果
					"roomNum": "", //房源编号
					"searchValue": "",
					"state": '0', //工单状态
					"repairType": "气", //报修类型
					"tenantId": "",
					"updateBy": "",
					"updateTime": "",
					createTime:""
				}
			}
		},
		created() {
			this.chooseList=[]
			this.apis.commonApi.getDict("repair_type").then(res=>{
				console.log("res",res);
				let data=res.data
				data.forEach(item=>{
					this.chooseList.push({
						name:item.dictLabel
					})
				})
			})
		},
		methods: {
			chooseFn(index) {
				this.typeChooseIndex = index
				this.form.repairType = this.chooseList[this.typeChooseIndex].name
			},
			selectConfirm(val) {
				for (let i = 0; i < this.chooseList.length; i++) {
					if (this.chooseList[i].name == val[0].label) {
						this.typeChooseIndex = i
						break
					}
				}
				this.form.repairType = this.chooseList[this.typeChooseIndex].name
			},
			addRepair() {
				let data=this.form
				if(this.isEmpty(data.reporter)||this.isEmpty(data.repairAddress)||this.isEmpty(this.form.phone)){
					this.showToast("请填写完内容！")
					return
				}else if(!this.$u.test.mobile(this.form.phone)){
					this.showToast("请填写正确的手机号！")
					return
				}
				this.form.orderSource=2
				this.apis.repairApi.add(this.form).then(res => {
					if (res.code == 200) {
						this.showSuccess=true
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bs-choose {
		margin-top: 22rpx;
		padding: 30rpx 32rpx;

		.bs-choose-t {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.bs-choose-b {
			margin-top: 30rpx;
			display: flex;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

			.choose {
				color: #44D94B;
				background: rgba(68, 217, 75, 0.1);
				border: 2rpx solid #44D94B;
			}

			view {
				margin-right: 20rpx;
				width: 146rpx;
				height: 70rpx;
				border: 2rpx solid rgba(#DDDDDD, 0);
				background: rgba(#DDDDDD, .35);
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	// 报修信息 s
	.bxxx {
		margin-top: 20rpx;

		.bxxx-t {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			color: #666666;
			line-height: 42rpx;
		}

		.bxxx-c {
			.bxxx-col {
				width: 100%;
				height: 98rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #EEEEEE;

				input {
					text-align: right;
				}

				/deep/ .input-placeholder {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				/deep/ .uni-input-input {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					text-align: right;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				/deep/ .uni-textarea-wrapper {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}

				/deep/ .uni-textarea-placeholder {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}

				textarea {
					margin-top: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}




				text {
					font-size: 28rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					color: #666666;
					line-height: 40rpx;
				}

				&:nth-child(4) {
					margin-top: 28rpx;
					align-items: flex-start;
					flex-direction: column;
					height: auto;
					border: none;
				}
			}
		}

	}

	// 报修信息 e

	// 按钮 s
	.bx-submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 104rpx;
		font-size: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 48rpx;
		background: #44D94B;
	}

	// 按钮 e


	//提交成功s
	.tjcg {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;

		.tjcg-c {
			@include flexCenter;
			flex-direction: column;

			.suc {
				background-color: #44D94B;
				width: 106rpx;
				height: 106rpx;
				border-radius: 50%;
				@include flexCenter;
			}

			view:nth-child(2) {
				margin-top: 52rpx;
				margin-bottom: 14rpx;
				font-size: 34rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: #000000;
			}

			view:nth-child(3) {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
			}
		}


	}

	// 提交成功e
</style>
